<template>
  <div class="look">
    <Header></Header>
    <div class="container">
      <ContentLeft></ContentLeft>
      <div class="content-center">
        <div class="center-nav">
          <router-link :to="{ name: 'home' }" class="nav-home">
            首页
          </router-link>
          <span>/</span>
          <span>法说法是撒</span>
        </div>
        <div class="center-main">
          <!-- 文章内容  -->
          <div class="main-wapper"></div>
          <!-- 文章评论 -->
        </div>
      </div>
      <ContentRight></ContentRight>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../components/Header";
import ContentLeft from "../components/Content-left";
import ContentRight from "../components/Content-right";
import Footer from "../components/Footer";
export default {
  mounted() {},
  data() {
    return {};
  },
  methods: {},
  components: {
    Header,
    ContentLeft,
    ContentRight,
    Footer
  },
};
</script>
<style lang="less" scoped>
.look {
  display: flex;
  flex-direction: column;
}
.look::before {
  content: " ";
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../assets/img/bg_of_user0_at_1615722062134.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.container {
  height: 100%;
  display: flex;
  justify-content: center;
  .content-center {
    width: 50vw;
    min-width: 500px;
    height: 100%;
    padding: 0 10px;
    .center-nav {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12px;
      padding: 10px 20px;
      display: flex;
      justify-content: end;
      .nav-home {
        text-decoration: none;
        color: rgb(0, 0, 0);
        font-weight: 600;
      }
      span {
        color: rgb(88, 88, 88);
        padding-left: 10px;
        user-select: none;
      }
    }
    .center-main {
      width: 100%;
      margin-top: 20px;
      //文章内容
      .main-wapper {
        height: 80vh;
        // border: 1px solid #fff;
        background-color: #fff;
        border-radius: 10px;
      }
      //文章评论
    }
  }
}
</style>